<template>
	<view>
		<block v-if="value">
			<view class="cu-item default-view flex justify-center margin-tb-sm " :class="['style-'+stype]" @tap="goGoodsDetail(value.id)"
			 v-if="stype=='list' && is_vip">
				<view class="goods-li overflow text-sm" style="width: 220rpx;">
					<view class="goods-thumb">
						<image :src="value.picture" mode="aspectFill"></image>
					</view>
					<view class="goods-name margin-lr-xs text-black margin-top-xs text-overflow-2">{{value.name}}</view>
					<view class="goods-bottom margin-lr-xs space-between margin-top-xs ">
						<view class="text-red text-red text-price text-sm">0</view>
						<view class="text-red text-red text-price text-sm" style="text-decoration: line-through;color: #868686;">{{value.price}}</view>
						<!-- <view class="text-gray goods-sale text-sm" v-if="col<3">销量：{{value.sales}}</view> -->
						
					</view>
					<!-- <view class="text-gray goods-sale text-sm" 
					style="color: #ffffff;background-color: #E8C927;width: 70px;font-size: 12px;margin-top: 5px;margin-bottom: 5px; margin-left: 2px; border-radius: 4rpx;">
					VIP免费领取
					</view> -->
				</view>
			</view>
			<view class="cu-item default-view space-between  bg-white margin-lr margin-bottom " :class="['style-'+stype]" @tap="goGoodsDetail(value.id)"
			 v-if="stype=='list' && !is_vip">
				<view class="goods-thumb bg-gray">
					<image mode="aspectFill" :src="value.picture"></image>
				</view>
				<view class="goods_info w100 margin-tb-xs margin-lr-sm">
					<view class="title text-lg text-overflow-2">{{value.name}}</view>
					<view class="text-price text-red text-lg">{{value.price}}</view>
					<view class="space-between text-gray">
						<text>销量：{{value.sales}}</text>
						<text>浏览：{{value.view}}</text>
					</view>
				</view>
		</view>
			<view class=" default-view  radius margin-bottom bg-white " :class="['style-'+stype,'column'+col,'index'+indexvalue]"
			 @tap="goGoodsDetail(value.id)" v-else-if="stype=='map'">
				<view class="goods-li overflow">
					<view class="goods-thumb">
						<image :src="value.picture" mode="widthFix" v-if="col==1"></image>
						<image :src="value.picture" mode="aspectFit" v-else></image>
					</view>
					<view class="goods-name margin-lr-sm text-black margin-top-sm text-overflow-2">{{value.name}}</view>
					<view class="goods-bottom margin-lr-sm space-between margin-top-xs margin-bottom-sm">
						<view class="text-red text-red text-price text-lg">{{value.price}}</view>
						<view class="text-gray goods-sale" v-if="col<3">销量：{{value.sales}}</view>
					</view>
				</view>
			</view>
			<view class=" default-view  margin-bottom bg-white" :class="['style-'+stype,'column'+col,'index'+indexvalue]" @tap="goGoodsDetail(value.id)"
			 v-else-if="stype=='swiper'">
				<view class="goods-li overflow" :class="col==1?'text-lg':'text-sm'">
					<view class="goods-thumb">
						<image :src="value.picture" mode="aspectFill" style="height: 300rpx;"></image>
					</view>
					<block v-if="col==1">
						<view class="goods-name margin-lr-sm text-black margin-top-sm text-overflow-2">{{value.name}}</view>
						<view class="goods-bottom margin-lr-sm space-between margin-top-sm margin-bottom-sm">
							<view class="text-red text-red text-price text-lg">{{value.price}}</view>
							<view class="text-gray goods-sale text-sm" v-if="col<3">销量：{{value.sales}}</view>
						</view>
					</block>
					<block v-if="col==2">
						<view class="goods-name margin-lr-sm text-black margin-top-sm text-overflow-2">{{value.name}}</view>
						<view class="goods-bottom margin-lr-sm space-between margin-top-sm margin-bottom-xs">
							<view class="text-red text-red text-price ">{{value.price}}</view>
							<view class="text-gray goods-sale text-sm" v-if="col<3">销量：{{value.sales}}</view>
						</view>
					</block>
					<block v-if="col==3">
						<view class="goods-name margin-lr-xs text-black margin-top-xs text-overflow-2">{{value.name}}</view>
						<view class="goods-bottom margin-lr-xs space-between margin-top-xs ">
							<view class="text-red text-red text-price text-sm">{{value.price}}</view>
							<!-- <view class="text-red text-red text-price text-sm" style="text-decoration: line-through;color: #868686;">{{value.price}}</view> -->
							<view class="text-gray goods-sale text-sm" v-if="col<3">销量：{{value.sales}}</view>
							
						</view>
						<!-- <view class="text-gray goods-sale text-sm" 
						style="color: #ffffff;background-color: #E8C927;width: 70px;font-size: 12px;margin-top: 5px;margin-left: 2px;border-radius: 4rpx;">
						VIP免费领取
						</view> -->
					</block>
				</view>
			</view>
			<view class="padding-xs default-view radius" :class="['style-'+stype,'column'+col,'index'+indexvalue]" @tap="goGoodsDetail(value.product.id)"
			 v-else-if="stype=='rush'">
				<block v-if="value.product">
					<view class="goods-li" :class="col==1?'text-lg':'text-sm'">
						<block v-if="col==1">
							<view class="goods-thumb">
								<image :src="value.product.picture" mode="widthFix"></image>
							</view>
							<view class="goods-name2 margin-lr-xs text-black margin-top-sm text-overflow">{{value.product.name}}</view>
							<view class="goods-bottom margin-lr-xs space-between margin-top-sm margin-bottom-xs">
								<view class="text-red text-red text-price text-lg">{{value.product.price * value.discount / 100}}</view>
								<view class="text-gray text-price text-decoration text-sm">{{value.product.price}}</view>
							</view>
						</block>
						<block v-if="col==2">
							<view class="goods-thumb thumb-height">
								<image :src="value.product.picture" mode="aspectFill"></image>
							</view>
							<view class="goods-name2 margin-lr-xs text-black margin-top-sm text-overflow-2">{{value.product.name}}</view>
							<view class="goods-bottom margin-lr-xs space-between margin-top-sm margin-bottom-xs">
								<view class="text-red text-red text-price ">{{value.product.price * value.discount / 100}}</view>
								<view class="text-gray text-price text-decoration text-sm">{{value.product.price}}</view>
							</view>
						</block>
						<block v-if="col==3">
							<view class="goods-thumb thumb-height">
								<image :src="value.product.picture" mode="aspectFill"></image>
							</view>
							<view class="goods-name2 margin-lr-xs text-black margin-top-xs text-overflow">{{value.product.name}}</view>
							<view class="goods-bottom margin-lr-xs space-between margin-top-xs ">
								<view class="text-red text-red text-price text-sm">{{value.product.price * value.discount / 100}}</view>
								<view class="text-gray text-price text-decoration text-sm">{{value.product.price}}</view>
							</view>
						</block>
					</view>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			value: {
				type: Object,
				default: null
			},
			stype: {
				type: String,
				default: "one"
			},
			col: {
				type: String,
				default: "1"
			},
			indexvalue: {
				type: String,
				default: "1"
			},
			is_vip: {
				type: Boolean,
				default: false,
			}
		},
		created: function(e) {},
		data() {
			return {
				// lineIndex:0,
			}
		},
		methods: {
			goGoodsDetail(id) {
				uni.navigateTo({
					url: "/pages/shop/goods?id=" + id
				})
			},
		},
	}
</script>

<style>
	.style-map {}

	.style-list {}

	.goods-li {
		/* border: 1px solid #E0E0E0; */
		border-radius: 5px;
	}

	.goods-li .goods-thumb {
		width: 100%;
		/* min-height: 280rpx; */
		overflow: hidden;
	}

	.goods-thumb image {
		width: 100%;
		height: 100%;
	}

	.goods-li .goods-name {
		text-align: justify;
		overflow: hidden;
	}

	.goods-li .goods-bottom {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
	}

	.goods_info {
		height: 200rpx;
		overflow: hidden;
	}

	.goods_info .title {
		height: 100rpx;
		line-height: 50rpx;
		overflow: hidden;
	}

	.goods_info .text-price {
		margin: 10rpx 0;
	}

	.column1 {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.column1 .goods-name {
		font-size: 32rpx;
		line-height: 50rpx;
	}

	.column2 .goods-name {
		line-height: 40rpx;
		height: 80rpx;
	}

	.column2.index0 {
		margin-left: 20upx;
		margin-right: 10upx;
	}

	.column2.index1 {
		margin-right: 20upx;
		margin-left: 10upx;
	}

	.column3.index0 {
		margin-left: 20upx;
		margin-right: 10upx;
	}

	.column3.index1 {
		margin-left: 10upx;
		margin-right: 10upx;
	}

	.column3.index2 {
		margin-left: 10upx;
		margin-right: 20upx;
	}

	.column1 .goods-thumb {
		min-height: 280rpx;
	}

	.column2 .goods-thumb {
		height: 300rpx;
	}

	.column3 .goods-thumb {
		height: 200rpx;
	}

	.style-rush {
		margin-left: 5upx !important;
		margin-right: 5upx !important;
	}

	.column1 .goods-name2 {
		line-height: 40rpx;
		height: 40rpx;
	}

	.column3 .goods-name2,
	.column2 .goods-name2 {
		line-height: 30rpx;
		height: 30rpx;
	}

	.style-list .goods-thumb {
		width: 220rpx;
		height: 220rpx;
		min-width: 220rpx;
	}

	.style-swiper {
		margin-left: 10rpx !important;
		margin-right: 10rpx !important;
	}

	.style-swiper.column1 {}

	.thumb-height {
		height: 240rpx;
	}
</style>
